//散点图
<template>
  <div>
    <div class="title">BenchMark</div>
    <div class="select">
      <el-row :gutter="6">
        <el-col :span="3">
          <el-select v-model="KPI_value" clearable placeholder="KPI">
            <el-option v-for="item in KPI_options" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-col>

        <el-col :span="3">
          <el-select v-model="Unit_value" clearable placeholder="Unit">
            <el-option v-for="item in Unit_options" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-col>

        <el-col :span="3">
          <el-select v-model="Brand_value" clearable placeholder="Brand/SKU">
            <el-option v-for="item in Brand_options" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-col>

        <el-col :span="1" @click="handleSearch">
          <el-button icon="el-icon-search" circle></el-button>
        </el-col>
      </el-row>
    </div>
    <div class="scatter">
      <el-row type=flex :gutter="0">
        <el-col :span="12">
          <scatter :title="'scatter'"></scatter>
        </el-col>

        <el-col :span="11">
          <scatter-matrix></scatter-matrix>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped>
  .title{
    text-align: left;
    padding-left: 50px;
    font-size: 30px;
    color: #676668;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .select{
    padding-top:20px;
    padding-left: 50px;
  }
  .scatter{
    /*width:100%;*/
    padding-top:20px;
    padding-left: 30px;
  }
</style>

<script>
  import Scatter from './components/Scatter'
  import ScatterMatrix from "./components/ScatterMatrix";
  export default {
    name: "echarts",
    components:{
      ScatterMatrix,
      Scatter
    },
    data(){
      return{
        KPI_value: [],
        Unit_value: [],
        Brand_value:[],
        KPI_options: [
          {
            value: '80-90',
            label: '80-90'
          }, {
            value: '90-100',
            label: '90-100'
          }
        ],
        Unit_options: [
          {
            value: '区域01',
            label: '区域01'
          }, {
            value: '区域02',
            label: '区域02'
          }
        ],
        Brand_options: [
          {
            value: '设备01',
            label: '设备01'
          }, {
            value: '设备02',
            label: '设备02'
          }
        ],
      }
    },
    methods:{
      handleSearch(){

      },
    }
  }
</script>


